<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>手机qq</title>
    <script src="../Vue/vue.js"></script>
    <script src="../Vue/vue-router.js"></script>
    <link rel="stylesheet" href="qqindex.css">
    <script src="base.js"></script>
    <script src="configure.js"></script>
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.css">
</head>
<body>
<div id="qq">
    <router-view></router-view>
</div>
<template id="mainpage">
    <div>
        <div class="top"><!--------------------头部top--------------------------->
            <div @click="information"><img src="qq-imgs/1.jpg" class="img1"></div>
            <div>消息</div>
            <div @click="add">+</div>
        </div>
        <add v-if="show"></add>

        <div class="content"><!--------------------中部content--------------------------->
            <div class="searchs">
                <span class="fa fa-search">搜索</span>
            </div>
            <div class="content1" @click="cont1">
                <div class="left"><img src="qq-imgs/2.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>我的电脑</div>
                        <div>0:00</div>
                    </div>
                    <div class="down">你已在电脑，可传文件到电脑</div>
                </div>
            </div>
            <div class="content2" @click="cont2">
                <div class="left"><img src="qq-imgs/3.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>看点日报</div>
                        <div>1:11</div>
                    </div>
                    <div class="down">震惊！空腹不能吃饭</div>
                </div>
            </div>
            <div class="content3" @click="cont3">
                <div class="left"><img src="qq-imgs/4.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>IT交流群</div>
                        <div>2:22</div>
                    </div>
                    <div class="down">李哥哥：moc pro 降价啦，性能超强，白菜价</div>
                </div>
            </div>
            <div class="content4">
                <div class="left"><img src="qq-imgs/5.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>张三</div>
                        <div>3:33</div>
                    </div>
                    <div class="down">[王者荣耀] 送你金币，巩固友谊</div>
                </div>
            </div>
            <div class="content5">
                <div class="left"><img src="qq-imgs/6.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>李四</div>
                        <div>5:55</div>
                    </div>
                    <div class="down">[新签名] 吃饭，睡觉，打豆豆</div>
                </div>
            </div>
            <div class="content6">
                <div class="left"><img src="qq-imgs/5.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>张三</div>
                        <div>3:33</div>
                    </div>
                    <div class="down">[王者荣耀] 送你金币，巩固友谊</div>
                </div>
            </div>
            <div class="content7">
                <div class="left"><img src="qq-imgs/6.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>李四</div>
                        <div>5:55</div>
                    </div>
                    <div class="down">[新签名] 吃饭，睡觉，打豆豆</div>
                </div>
            </div>
            <div class="content8">
                <div class="left"><img src="qq-imgs/5.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>张三</div>
                        <div>3:33</div>
                    </div>
                    <div class="down">[王者荣耀] 送你金币，巩固友谊</div>
                </div>
            </div>
            <div class="content9">
                <div class="left"><img src="qq-imgs/6.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>李四</div>
                        <div>5:55</div>
                    </div>
                    <div class="down">[新签名] 吃饭，睡觉，打豆豆</div>
                </div>
            </div>
            <div class="content10">
                <div class="left"><img src="qq-imgs/6.jpg"></div>
                <div class="right">
                    <div class="up">
                        <div>李四</div>
                        <div>5:55</div>
                    </div>
                    <div class="down">[新签名] 吃饭，睡觉，打豆豆</div>
                </div>
            </div>

        </div>
        <div class="bottom"><!----------------底部bottom----------------------------->
            <div class="bottom1">
                <div class="fa fa-smile-o"></div>
                <div>消息</div>
            </div>
            <div class="bottom2">
                <div class="fa fa-user-circle-o"></div>
                <div>联系人</div>
            </div>
            <div class="bottom3">
                <div class="fa fa-eye"></div>
                <div>看点</div>
            </div>
            <div class="bottom4">
                <div class="fa fa-user-circle-o"></div>
                <div>动态</div>
            </div>
        </div>
    </div>
</template>

<template id="inform">
    <div>
        <div class="informtop">
            <div class="informtop1">
                <div class="fa fa-calendar-check-o"></div>
                <div>打卡</div>
                <div @click="backs">X</div>
            </div>
            <div class="informtop2">
                <div class="informtop21"><img src="qq-imgs/1.jpg" class="img2"></div>
                <div class="informtop22">
                    <div>龙傲天</div>
                    <div>☀☀☾☾</div>
                    <div class="xmb">先定个小目标</div>
                </div>
                <div class="fa fa-qrcode informtop23">
                </div>
            </div>
        </div>
        <div class="informcentent">
            <div class="informcentent1">添加我的状态</div>
            <div class="informcentent2">
                <ul>
                    <li v-for="(item,index) in lis">
                        <span>{{item.one}}</span>
                        <span>{{item.two}}</span>
                        <span>{{item.three}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div class="informbottom">
            <div class="informbottom1" ><span>☼</span><br><span>设置</span></div>
            <div class="informbottom2" ><span>☾</span><br><span>夜间</span></div>
            <div class="informbottom3" ><span>29°</span><br><span>厦门</span></div>
        </div>
    </div>
</template>
<template id="add">
    <div class="add1">
        <div class="add11"></div>
        <div class="add12">
            <div class="fa fa-plus-circle">&nbsp&nbsp&nbsp&nbsp创建群聊</div>
            <div class="fa fa-plus-circle">&nbsp&nbsp&nbsp&nbsp加好友/群</div>
            <div class="fa fa-plus-circle">&nbsp&nbsp&nbsp&nbsp扫一扫</div>
            <div class="fa fa-plus-circle">&nbsp&nbsp&nbsp&nbsp面对面快传</div>
            <div class="fa fa-plus-circle">&nbsp&nbsp&nbsp&nbsp收付款</div>
            <div class="fa fa-plus-circle">&nbsp&nbsp&nbsp&nbsp添加小程序</div>
        </div>
    </div>
</template>
<template id="c1">
    <div>
        <div class="c1top">
            <div @click="back1"><</div>
            <div>我的电脑</div>
            <div class="fa fa-user-o"></div>
        </div>
        <div class="centent1">
            <div class="centent11">
                <img src="qq-imgs/1.jpg" class="img3">
                <div>index.jpg</div>
            </div>
        </div>
        <div class="c1bottom">
            <div class="c1bottom1">
                <input type="text">
                <div>发送</div>
            </div>
            <div class="c1bottom2">
                <div class="fa fa-file-image-o" ></div>
                <div class="fa fa-camera" ></div>
                <div class="fa fa-folder-open"></div>
                <div class="fa fa-desktop"></div>
            </div>
        </div>
    </div>
</template><!--------------------c1我的电脑---------------------------------->
<template id="c2">
    <div>
        <div class="top2">
            <div @click="back2"><</div>
            <div>看点·日报</div>
            <div class="fa fa-user-o"></div>
        </div>
        <div class="centent2">
            <div class="centent21">
                <i>九号平衡车骑行/遥控两种玩法</i><br><i>来源：小米商城</i>
            </div>
            <div class="centent22">
                <div>
                    <img src="qq-imgs/01.jpg">
                    <img src="qq-imgs/02.jpg">
                    <img src="qq-imgs/03.jpg">
                    <img src="qq-imgs/01.jpg">
                    <img src="qq-imgs/02.jpg">
                </div>
                <a class="a1" href="#">京剧脸谱，是一种具有中国文化特色的特殊化妆方法。由于每个历史人物或某一种类型的人物都有一种大概的谱式，就像唱歌、奏乐都要按照乐谱一样，所以称为“脸谱”。</a>
                <br><a class="a2" href="#">来源：百度百科</a>
            </div>
        </div>
    </div>
</template><!--------------------c2看点日报---------------------------------->
<template id="c3">
    <div>
        <div class="top3">
            <div @click="back3"><</div>
            <div>IT交流群</div>
            <div class="fa fa-bars"></div>
        </div>
        <div class="centent3">

        </div>
        <div class="c3bottom">
            <div class="c3bottom1">
                <input type="text">
                <div>发送</div>
            </div>
            <div class="c3bottom2">
                <div class="fa fa-microphone"></div>
                <div class="fa fa-file-image-o" ></div>
                <div class="fa fa-camera" ></div>
                <div class="fa fa-envelope"></div>
                <div class="fa fa-meh-o"></div>
                <div class="fa fa-desktop"></div>
            </div>
        </div>
    </div>
</template><!--------------------c3聊天群---------------------------------->
<script>
    var inform=Vue.extend({
        template:"#inform",
        data(){
          return{
              lis:[
                  {
                      one:"♛",
                      two:"了解会员特权",
                      three:">"
                  },
                  {
                      one:"♛",
                      two:"QQ钱包",
                      three:">"
                  },
                  {
                      one:"♛",
                      two:"个性装扮",
                      three:">"
                  },
                  {
                      one:"♛",
                      two:"我的收藏",
                      three:">"
                  },
                  {
                      one:"♛",
                      two:"我的相册",
                      three:">"
                  },
                  {
                      one:"♛",
                      two:"我的文件",
                      three:">"
                  },
                  {
                      one:"♛",
                      two:"免流量特权",
                      three:">"
                  },

              ]
          }
        },
        mounted(){
            this.informs();
        },
        methods:{
            informs(){
                var height=window.innerHeight;
                document.body.style.height=height+"px";
                var contents_height=0;
                contents_height=height-300-150;
                var contentDoms=document.querySelector(".informcentent");
                contentDoms.style.height=contents_height+"px";
            },
            backs(){
                this.$router.push({name:"mainpages"});
            }
        }
    });
    var add = Vue.component("add", {
        template: "#add"
    });
    var c1 = Vue.extend({
        template: "#c1",
        mounted(){
          this.configure1();
        },
        methods: {
            back1() {
                this.$router.push({name: "mainpages"});
            },
            configure1(){
                //设置body的高度等于window高度
                var height = window.innerHeight;
                document.body.style.height = height + "px";
                //2. 设置content块等于body的高度减去一头一尾的高度
                var content1_height = 0;
                content1_height = height - 100 - 180;
                var contentDom1 = document.querySelector(".centent1");
                contentDom1.style.height = content1_height + "px";
            }
        }
    });

    var c2 = Vue.extend({
        template: "#c2",
        methods: {
            back2() {
                this.$router.push({name: "mainpages"});
            }
        }
    });
    var c3=Vue.extend({
        template:"#c3",
        mounted(){
          this.configure3();
        },
        methods: {
            back3() {
                this.$router.push({name: "mainpages"});
            },
            configure3(){
                //设置body的高度等于window高度
                var height = window.innerHeight;
                document.body.style.height = height + "px";
                //2. 设置content块等于body的高度减去一头一尾的高度
                var content3_height = 0;
                content3_height = height - 100 - 180;
                var contentDom3 = document.querySelector(".centent3");
                contentDom3.style.height = content3_height + "px";
            }

        }
    });

    var mainpage = Vue.extend({
        template: "#mainpage",
        data() {
            return {
                show: false,
            }
        },
        mounted(){
            this.configure();
        },
        methods: {
            mianpage() {
                this.get();
            },
            information(){
              this.$router.push({name: "informs"});
            },
            add() {
                this.show = !this.show;
            },
            cont1() {
                this.$router.push({name: "conts1"});
            },
            cont2() {
                this.$router.push({name: "conts2"});
            },
            cont3(){
                this.$router.push({name: "conts3"});
            },
            configure() {//--------------------------------设置中间部分高度
                    //设置body的高度等于window高度
                    var height = window.innerHeight;
                    document.body.style.height = height + "px";
                    //2. 设置content块等于body的高度减去一头一尾的高度
                    var content_height = 0;
                    content_height = height - 100 - 100;
                    var contentDom = document.querySelector(".content");
                    contentDom.style.height = content_height + "px";

            }
        }
    });


    var router = new VueRouter({
        routes: [
            {path: "/", component: mainpage, name: "mainpages"},
            {path: "/c1", component: c1, name: "conts1"},
            {path: "/c2", component: c2, name: "conts2"},
            {path: "/c3", component: c3, name: "conts3"},
            {path: "/inform", component: inform, name: "informs"},
            // {path: "/c4", component: c4, name: "conts4"},
            // {path: "/c5", component: c5, name: "conts5"},
            // {path: "/c6", component: c6, name: "conts6"},
            // {path: "/c7", component: c7, name: "conts7"},
            // {path: "/c8", component: c8, name: "conts8"},
            // {path: "/c9", component: c9, name: "conts9"},
            // {path: "/c10", component: c10, name: "conts10"},
        ]
    });
    var vue = new Vue({
        el: "#qq",
        router,
        data: {},
        methods: {}
    });

</script>
</body>
</html>